<!--
 * @Author: atdow
 * @Date: 2021-07-14 19:30:30
 * @LastEditors: null
 * @LastEditTime: 2021-07-17 15:02:52
 * @Description: file description
-->
<template>
    <div class="app-container app-height">
        <div class="bg-white">
            <!-- TODO -->
            <el-form
                ref="ruleForm"
                :model="ruleForm"
                label-width="110px"
                class="application-form clearfix"
            >
                <el-form-item
                    label="选择时间"
                    prop="datetime"
                    class="float-left"
                >
                    <el-date-picker
                        v-model="ruleForm.datetime"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="changeDatetimePicker"
                        align="left"
                        clearable
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item
                    label="用户名称"
                    prop="createBy"
                    class="float-left"
                >
                    <el-input
                        v-model="ruleForm.createBy"
                        placeholder="请输入用户名称"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label-width="15px"
                    class="application-form-btn float-left"
                >
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="fetchData"
                        >查询</el-button
                    >
                    <el-button type="primary" size="mini" @click="resetForm"
                        >重置</el-button
                    >
                </el-form-item>
            </el-form>
            <ThrottlingListTable
                :form="ruleForm"
                ref="throttlingListTableRef"
            />
        </div>
    </div>
</template>

<script>
import ThrottlingListTable from "./modules/ThrottlingListTable.vue";
import { getUserApiGroup } from "@/api/dataManagement/system/user";

export default {
    name: "MineApplication",
    components: {
        ThrottlingListTable
    },
    data() {
        return {
            ruleForm: {
                createBy: "", // 服务中文名称
                datetime: []
                // startTime:'', // 开始时间
                // endTime:'', // 结束时间
            },
            groupList: [],
            pickerOptions: {}
        };
    },
    created() {
        // this.getUserApiGroup();
    },
    activated() {
        // this.getUserApiGroup();
    },
    methods: {
        handleClick(value) {
            this.$refs.throttlingListTableRef.fetchData();
        },
        // 获取分组列表
        getUserApiGroup() {
            getUserApiGroup().then(res => {
                if (res.code === 200) {
                    this.groupList = res.data;
                }
            });
        },
        changeDatetimePicker(data) {
            let startTime = "",
                endTime = "";
            if (data && data.length) {
                startTime = this.parseTime(
                    new Date(data[0]),
                    "{y}-{m}-{d} {h}:{i}:{s}"
                );
                endTime = this.parseTime(
                    new Date(data[1]),
                    "{y}-{m}-{d} {h}:{i}:{s}"
                );
            }
            this.ruleForm.startTime = startTime;
            this.ruleForm.endTime = endTime;
        },
        resetForm() {
            this.$refs.ruleForm.resetFields();
            this.ruleForm.startTime = undefined;
            this.ruleForm.endTime = undefined;
            this.fetchData();
        },
        fetchData() {
            this.$refs.throttlingListTableRef.fetchData();
        }
    }
};
</script>

<style lang="scss" scoped>
.app-container {
    padding: 20px;

    .application-form ::v-deep {
        .el-form-item__label {
            text-align: right;
        }
    }
}
</style>
